<!DOCTYPE html>
<html lang="zh-cn" style="padding: 0;margin: 0;overflow: hidden;">
	<head>
		<meta charset="UTF-8">
		<title class="title">原水工艺图</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/vant.css" />

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="./js/vue.js"></script>
		<script src="./js/vant.js""></script>
		<script src=" ./svg2.js""> </script> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	</head>
	<body style="padding: 0;margin: 0;overflow: hidden;">
		<div id="app" :style="{width:width+'px',height:height +'px',padding: 0,margin: 0,overflow:scale===1?'hidden':'scroll'}">
			<svg id="svg" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :width="width*scale" :height="height*scale"
			 version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
			</svg>
			<image src="./image/arrow_left.png" class="arrow_left" @touchstart="back" style=" position: absolute;
				    top: 25px;
				    left: 20px;
				    height: 30px;
				    width: 30px;" />
			<image src="./image/jia.png" class="jia" @touchstart="jia" style="  position: absolute;
				    bottom: 60px;
				    right: 20px;
				    height: 30px;
				    width: 30px;" />
			<image src="./image/jian.png" class="jian" @touchstart="jian" style="  position: absolute;
				    bottom: 20px;
				    right: 20px;
				     height: 30px;
				     width: 30px;" />
			<div style="height:1000px;" v-if="!width"></div>
			<van-popup v-model="show">
				<div style="width: calc(80vw - 40px);margin-left: 10vw; padding:20px;border-radius: 20px;">
					<div style="font-weight: blod;font-size: 20px;margin-bottom: 10px;">名称</div>
					<div style="display: flex;flex-wrap: wrap;line-height: 26px;">
						<div style="width: 33%;">建设规模</div>
						<div style="width: 33%;color: #606266;">0.56m3/s</div>
						<div style="width: 33%;color: #606266;">4.8万 m3/d</div>
						<div style="width: 33%;">运行流量</div>
						<div style="width: 33%;color: #606266;">0.21m3/s2</div>
						<div style="width: 33%;color: #606266;">052.00m3/h</div>
						<div style="width: 33%;">进水水位高程</div>
						<div style="width: 50%;color: #606266;">1073.98m</div>
						<div style="width: 50%;color: #606266;">1073.98m</div>
					</div>
				</div>
			</van-popup>
		</div>

		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					width: 0,
					height: 0,
					scale: 1,
					show: false,
					data: null,
					start: null,
				},
				computed: {

				},
				beforeCreate() {
					document.addEventListener('plusready', ()=> { 
					       let a = plus.screen.resolutionHeight,
								b = plus.screen.resolutionWidth;
								this.width=a>b?a:b
								this.height=a<b?a:b
					       console.log(this.width, this.height)
					},false); 
				},
				mounted() {
					// this.width=1920
					// 			this.height=1080
					let svg = document.getElementById('svg')
					svg.innerHTML = getSvg()
				},
				methods: {
					touchstart(e) {
						console.log(e)
						// console.log(e.touches.length)
						if (e.touches.length == 2) {
							this.start = this.getDistance(e.touches[0], e.touches[1]);
							console.log(this.start)
						} else {
							this.start = null
						}
					},
					touchmove(e) {
						if (this.start && e.touches.length == 2) {
							// let dom=document.getElementById('app'),
							// 	left=dom.scrollLeft,
							// 	width=dom.scrollWidth,
							// 	top=dom.scrollTop,
							// 	height=dom.scrollHeight,
							// 	oldscale=this.scale;
							
							let scale = this.getDistance(e.touches[0], e.touches[1]) / this.start //*this.scale
							if (scale > 1) {
								scale = (scale - 1) /40 + 1
							} else if (scale < 1) {
								scale = 1 - (1 - scale) / 40
							}
							scale = scale * this.scale
							if (scale > 5) {
								this.scale = 5
							} else if (scale < 1) {
								this.scale = 1
							} else {
								this.scale = scale
							}
							// if(this.scale==oldscale){
							// 	return
							// }
							
								// let scrollLeft=0,
								// 	scrollTop=0;
								// if(left==0){
								// 	scrollLeft=this.width*(this.scale-1)/2
								// }else{
								// 	scrollLeft=(left+this.width/2)/this.width/oldscale * this.width*this.scale - this.width/2
								// }
								// dom.scrollLeft=scrollLeft
								
								// if(top==0){
								// 	scrollTop=this.height*(this.scale-1)/2
								// }else{
								// 	scrollTop=(top+this.height/2)/this.height/oldscale * this.height*this.scale - this.height/2
								// }
								// dom.scrollTop=scrollTop
							
						}
					},
					touchend(e) {
						this.start = null
					},
					getDistance(p1, p2) {
						var x = p2.pageX - p1.pageX,
							y = p2.pageY - p1.pageY;
						return Math.sqrt((x * x) + (y * y));
					},
					showPopup(e) {
						if (e.path[0].id.indexOf('shape') > -1 || e.path[1].id.indexOf('shape') > -1) {
							this.show = true
						}
					},
					jia() {
						let dom=document.getElementById('app')
						let left=dom.scrollLeft,
							width=dom.scrollWidth,
							top=dom.scrollTop,
							height=dom.scrollHeight,
							scale=this.scale;
						if (this.scale < 5) {
							this.scale += 0.3
						}
						if (this.scale > 5) {
							this.scale = 5
						}
						if(this.scale==scale){
							return
						}
						setTimeout(()=>{
							let scrollLeft=0,
								scrollTop=0;
							if(left==0){
								scrollLeft=this.width*(this.scale-1)/2
							}else{
								scrollLeft=(left+this.width/2)/this.width/scale * this.width*this.scale - this.width/2
							}
							dom.scrollLeft=scrollLeft
							
							if(top==0){
								scrollTop=this.height*(this.scale-1)/2
							}else{
								scrollTop=(top+this.height/2)/this.height/scale * this.height*this.scale - this.height/2
							}
							dom.scrollTop=scrollTop
						},10)
					},
					jian() {
						let dom=document.getElementById('app')
						let left=dom.scrollLeft,
							width=dom.scrollWidth,
							top=dom.scrollTop,
							height=dom.scrollHeight,
							scale=this.scale;
						
						if (this.scale > 1) {
							this.scale -= 0.3
						}
						if (this.scale < 1) {
							this.scale = 1
						}
						if(this.scale==scale){
							return
						}
						
						setTimeout(()=>{
							let scrollLeft=0,
								scrollTop=0;
								
								
							scrollLeft=(left+this.width/2)/this.width/scale * this.width*this.scale - this.width/2
							dom.scrollLeft=scrollLeft
							
							scrollTop=(top+this.height/2)/this.height/scale * this.height*this.scale - this.height/2
							dom.scrollTop=scrollTop
						},10)
						
					},
					back() {
                        uni.navigateBack({
                            delta:1
                        })
                        plus.webview.currentWebview().close();
					}
				},
			})
		</script>
		<!-- <style type="text/css" scoped>
				.arrow_left{
				    position: absolute;
				    top: 20px;
				    left: 20px;
				    height: 30px;
				    width: 30px;
				}
				.jia{
				    position: absolute;
				    bottom: 60px;
				    right: 20px;
				    height: 30px;
				    width: 30px;
				}
				.jian{
				    position: absolute;
				   bottom: 20px;
				   right: 20px;
				    height: 30px;
				    width: 30px;
				}
			</style> -->
	</body>
</html>
